<template>
  <div class="sort-checkbox">
    <draggable  element="ol" ref="draggable"
        :list="DataList"
        @end="handleDraggableEnd"
        @start="drag=true"
      >
        <li v-for="(item, index) in DataList" class="list"
            :key="index"
            :data-item="JSON.stringify(item)"
            :class="{
            'is-hidden' : !item.show
            }"
        >
            <i class="iconfont icon-shunxutuozhuai"/>
            <el-checkbox
                v-model="item.show"
                @change="checkChange(item)"
                :disabled="(item.show && checkBoxDisable) || item.disabled"
                >
                {{ item.label }}
            </el-checkbox>
        </li>
    </draggable>
  </div>
</template>

<script lang="ts">
import { deepClone } from '@/utils/m7Utils'
import draggable from 'vuedraggable'
export default {
  name: 'SearchCheckbox',
  components: { draggable },
  props: {
      title: {
          // 标题
      type: String,
      default: '自定义排序'
    },
    headerData: {
        // 数据
        type: Array,
        default: []
    },
  },
  data(){
    return {
      DataList: [],
      filterText: '' // 过滤值
    }
  },
  watch:{
    headerData(){
        this.initChecked()
    }
  },
  computed:{
    checkBoxDisable(){
      // 只剩一个checkbox禁止取消
      let num = 0
      this.DataList.forEach((item) => {
        if (item.show && item.prop !== 'oprate') {
          num++
        }
      })
      return num === 1
    }
  },
  methods:{
    initChecked(){
      const DataList = deepClone(this.headerData)
      this.DataList = DataList
      this.$emit('onCheckChange', DataList, true)
    },
    checkChange(data){
      // check-box状态变化
      this.$emit('onCheckChange', this.DataList, null, data)
    },
    handleDraggableEnd () {
      this.$emit('onCheckChange', this.DataList)
    },
  },
  mounted(){
    this.initChecked()
  }
}
</script>

<style lang="stylus" scoped>
@import "../../../../assets/common.styl"
.draggable-box
  max-height 250px
  overflow-y scroll
.sort-checkbox
  max-height 300px
  overflow-y auto
  width 200px
  font-size 14px
  .header
    padding 16px
    font-weight 500
    color rgba(0, 0, 0, 0.88)
    box-shadow: inset 0px -1px 0px rgba(0, 0, 0, 0.05)
  .search
    :deep(.el-input__wrapper)
      border 1px solid transparent
      background var(--mc-gray2-color)
      border-radius 18px
      box-shadow none
  .list
    color rgba(0, 0, 0, 0.88)
    display flex
    align-items center
    padding 6px 0
  :deep(.el-checkbox__input).is-checked + .el-checkbox__label
    color rgba(0, 0, 0, 0.66)
  :deep(.el-checkbox__label)
    font-size 14px
  .icon-shunxutuozhuai
    cursor move
    color rgba(0, 0, 0, 0.38)
    margin-right 5px
</style>
